<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .hotdog {
      transition: all linear .1s;
      height: 40px;
      width: 40px;
    }

    .wsc { 
      height: 60px;
      width: 60px;
      position: absolute;
      bottom: 0;
      left: 800px;
    }
  </style>
</head>

<body>

  <h1>热狗大战--已得【<span id="t1"></span>】分。</h1>
  <img src="wsc.jpg" class="wsc">

  <script>
    var num = 0
    setInterval(function () {
      createHotDog()
    }, 100)

    function createHotDog() {
      // 1 创建热狗
      var imgObj = document.createElement('img')
      imgObj.src = './hotdog.jpg'
      imgObj.width = 20
      // 2 加随机样式
      imgObj.style.position = 'absolute'
      imgObj.style.top = '0px'
      var min = 0
      var max = (window.innerWidth || document.documentElement.clientWidth) - 20
      imgObj.style.left = Math.floor(Math.random() * (max - min + 1) + min) + 'px'
      document.body.appendChild(imgObj)
      imgObj.setAttribute('class', 'hotdog');

      // 3 超出热狗删除
      var imgTop = 0
      var t = setInterval(function () {
        imgTop += 30
        imgObj.style.transform = "translateY(" + imgTop + "px)"
        if (imgTop >= (window.innerHeight) - 20) {
          num++
          document.querySelector('#t1').innerText = num 
          document.body.removeChild(imgObj)
          clearInterval(t)
        }
        //碰撞游戏结束
        var x = Math.abs(wscObj.offsetLeft - imgObj.offsetLeft)
        var y = Math.abs(wscObj.offsetTop- imgTop)
        if (x <= 20 && y <= 20) {
          num=num-1
          alert("游戏结束，你躲避了"+num+"个热狗，点击确定重新开始")
          clearInterval(t)
          location.href=location.href
        }
      }, 30)
      // 4 添加思聪
      var wscObj = document.querySelector(".wsc")

      document.onmousemove = function (evt) {
        var e = evt || window.event

        wscObj.style.top = e.pageY - wscObj.offsetHeight / 2 + "px"
        wscObj.style.left = e.pageX - wscObj.offsetWidth / 2 + "px"
      }


    }
  </script>
</body>

</html>